<script setup>
import {
    Management, Promotion, UserFilled, User, Crop, EditPen,
    SwitchButton, CaretBottom, List, Shop, SetUp, DataBoard,
    BellFilled, Checked, TrendCharts, Document, Notebook, Tickets, ScaleToOriginal
} from '@element-plus/icons-vue'
import avatar from '@/assets/default.png'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import { useTokenStore } from '@/stores/token.js'
const tokenstore = useTokenStore();
//导入api接口函数
import { userInfoService, deleteSessionOfTokenService } from '@/api/user.js'
//使用路由，导出useRouter函数
import { useRouter } from 'vue-router';
const router = useRouter()
//导入pinia
import { useUserInfoStore } from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();
const manageuser = ref(false);
const updatepass = ref(false)
const admin = ref()
//获取个人信息
const getUserInfo = async () => {
    let result = await userInfoService();
    //存储pinia中
    console.log(result);
    userInfoStore.setInfo(result.data);
    console.log(userInfoStore.userinfo);
    admin.value = userInfoStore.userinfo.type + ': '
}
getUserInfo();
console.log(userInfoStore.userinfo);
const deleteSessionOfToken = async () => {
    let result = await deleteSessionOfTokenService();
}
const handleCommand = (command) => {
    if (command === 'logout') {
        //退出登录
        ElMessageBox.confirm(
            '你确认退出登录码？',
            '温馨提示',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        )
            .then(async () => {
                //用户点击了确认
                //清空pinia中的token和个人信息
                userInfoStore.removeInfo()
                tokenstore.removeToken()
                deleteSessionOfToken();
                //跳转到登录页
                ElMessage.success("成功退出登录")
                router.push('/login')
            })
            .catch(() => {
                //用户点击了取消
                ElMessage({
                    type: 'info',
                    message: '取消退出',
                })
            })
    } else {
        //路由
        router.push('/user/' + command)
    }
}
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="240px">
            <div class="el-aside__logo"></div>
            <el-menu id="element" :collapse="isCollapse" active-text-color="#2E8B57" background-color="#F5F5F5"
                text-color="#363636" router>


                <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <BellFilled />
                        </el-icon>
                        <span style="font-weight: bold;">基本信息管理</span>
                    </template>
                    <el-menu-item index="/client/manage">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>客户管理</span>
                    </el-menu-item>
                    <el-sub-menu index="1-2">
                        <template #title>
                            <el-icon>
                                <Notebook />
                            </el-icon>
                            团队信息管理
                        </template>
                        <el-menu-item index="/area/manage">
                            <el-icon>
                                <ScaleToOriginal />
                            </el-icon>
                            <span>销售片区管理</span>
                        </el-menu-item>
                        <el-menu-item index="/user/manage">
                            <el-icon>
                                <SetUp />
                            </el-icon>
                            <span>营销人员管理</span>
                        </el-menu-item>
                        <el-menu-item index="/move/manage">
                            <el-icon>
                                <DataBoard />
                            </el-icon>
                            <span>片区人员调动管理</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/production/manage">
                        <el-icon>
                            <Tickets />
                        </el-icon>
                        <span>产品管理</span>
                    </el-menu-item>
                </el-sub-menu>



                <el-sub-menu index="2">
                    <template #title>
                        <el-icon>
                            <Shop />
                        </el-icon>
                        <span style="font-weight: bold;">销售管理</span>
                    </template>
                    <el-menu-item index="/client/come">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>客户来访管理</span>
                    </el-menu-item>
                    <el-sub-menu index="2-2">
                        <template #title>
                            <el-icon>
                                <Notebook />
                            </el-icon>
                            销售机会管理
                        </template>
                        <el-menu-item index="/chance/log">
                            <el-icon>
                                <ScaleToOriginal />
                            </el-icon>
                            <span>销售机会登记</span>
                        </el-menu-item>
                        <el-menu-item index="/chance/pass">
                            <el-icon>
                                <SetUp />
                            </el-icon>
                            <span>销售机会分配及传递</span>
                        </el-menu-item>
                        <el-menu-item index="/chance/trace">
                            <el-icon>
                                <DataBoard />
                            </el-icon>
                            <span>机会跟踪</span>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/storage/inquiry">
                        <el-icon>
                            <Tickets />
                        </el-icon>
                        <span>销售库存查询</span>
                    </el-menu-item>
                </el-sub-menu>







                <el-menu-item index="/staff/manage" style="font-weight: bold;">
                    <el-icon>
                        <Management />
                    </el-icon>
                    <span>合同管理</span>
                </el-menu-item>
                <el-menu-item index="/productionps/manage" style="font-weight: bold;">
                    <el-icon>
                        <List />
                    </el-icon>
                    <span>价格本管理</span>
                </el-menu-item>
                <el-menu-item index="/person/schedul" style="font-weight: bold;">
                    <el-icon>
                        <Checked />
                    </el-icon>
                    <span>应收帐管理</span>
                </el-menu-item>

                <el-menu-item index="/company/msg/manage" style="font-weight: bold;">
                    <el-icon>
                        <TrendCharts />
                    </el-icon>
                    <span>公司信息发布管理</span>
                </el-menu-item>
                <el-menu-item index="/daily/manage" style="font-weight: bold;">
                    <el-icon>
                        <Promotion />
                    </el-icon>
                    <span>日常管理</span>
                </el-menu-item>
                <el-sub-menu :index="'3'">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span style="font-weight: bold;">个人中心</span>
                    </template>
                    <el-menu-item index="/user/info">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                    <el-menu-item index="/user/avatar" v-show="false">
                        <el-icon>
                            <Crop />
                        </el-icon>
                        <span>更换头像</span>
                    </el-menu-item>
                    <el-menu-item index="/user/resetPassword">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                        <span>重置密码</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header>
                <h1>{{ admin }}<strong>{{ userInfoStore.userinfo.name }}</strong></h1>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="userInfoStore.userinfo.userPic ? userInfoStore.userinfo.userPic : avatar" />
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <!-- <el-dropdown-item command="info" :icon="User">基本资料</el-dropdown-item> -->
                            <!-- <el-dropdown-item command="avatar" :icon="Crop">更换头像</el-dropdown-item> -->
                            <!-- <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item> -->
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>
            <!-- 中间区域 -->
            <el-main>
                <router-view></router-view>
            </el-main>
            <!-- 底部区域 -->
            <el-footer>Java应用开发框架大作业 ©2024 Created by 重庆交通大学22级计算机科学与技术曙光班 向鸿锐&肖鸿源</el-footer>
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
.layout-container {
    height: 100vh;

    .el-aside {
        background-color: #F5F5F5;

        &__logo {
            height: 150px;
            background: url('@/assets/logo.jpg') no-repeat center / 110px auto;
        }

        .el-menu {
            border-right: none;

        }

        // overflow-x: hidden;
        // overflow-y: hidden; //禁用滚动条则不能滑动了
    }

    .el-header {
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .el-dropdown__box {
            display: flex;
            align-items: center;

            .el-icon {
                color: #999;
                margin-left: 10px;
            }

            &:active,
            &:focus {
                outline: none;
            }
        }
    }

    .el-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        color: #666;
    }
}
</style>